<template>
    <div class="container" v-if="listData">
        <div class="header">
            <back :title="title"></back>
        </div>
        <div class="container-wapper" ref="wrapper">
            <div class="container-content">
                <div class="state" v-if="listData.payStatus === 0">
                    订单待支付
                </div>
                <div class="state" v-if="listData.payStatus === 1">
                    交易成功
                </div>

                <div class="order-info">
                    <div class="order-info-head">
                        <div class="table-container">
                            <!-- <p>桌号</p> -->
                            <p>{{ listData.buyerAddress }}</p>
                        </div>
                    </div>
                    <div class="order-info-goods">
                        <goodsInfo :data="singleData"></goodsInfo>
                        <div class="goods-remarks">
                            <p>{{listData.orderMark}}</p>
                            <van-button
                                icon="plus"
                                color="#FBF5E9"
                                size="small"
                                style="color: #000"
                                @click="addto"
                                >追加菜单</van-button
                            >
                        </div>
                    </div>
                    <div class="order-info-other">
                        <div class="order-info-other-title">其他信息</div>
                        <div class="order-info-other-text">
                            <div class="order-info-other-text-l">订单编码</div>
                            <div class="order-info-other-text-r">
                                {{ listData.orderId }}
                            </div>
                        </div>
                        <div class="order-info-other-text">
                            <div class="order-info-other-text-l">下单时间</div>
                            <div class="order-info-other-text-r">
                                {{ listData.createTime }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import goodsInfo from "./GoodsInfo.vue";
import back from "../components/Back.vue";
import http from "../api/http";
import moment from "moment";
import BScroll from "better-scroll";
export default {
    data() {
        return {
            title: "订单详情",
            listData: [],
            singleData: {},
            listBScroll: null,
        };
    },
    components: {
        goodsInfo,
        back,
    },
    methods: {
        addto() {
            console.log(this.listData);
            this.$store.state.orderData = this.listData
            // let data = JSON.stringify(this.listData);
            this.$store.state.homeData = []
            this.$router.push('/');
        },
        initSrcoll() {
            this.listBScroll = new BScroll(this.$refs.wrapper, {
                click: true,
                scrollY: true,
                probeType: 3,
            });
        },
    },
    watch: {
        listData() {
            this.$nextTick(() => {
                this.initSrcoll();
                this.listBScroll.refresh();
            });
        },
    },
    mounted() {},
    created() {
        console.log(this.$route.params);
        if (this.$route.params) {
            let data = this.$route.params;
            http.get(
                "/tophappiness/sell/buyer/order/detail?openid=" +
                    data.openid +
                    "&orderId=" +
                    data.orderId
            ).then((res) => {
                console.log(res);
                res.data.createTime = moment(res.data.createTime * 1000).format(
                    "YYYY-MM-DD HH:mm:ss"
                );
                this.listData = res.data;
                let list = [];
                res.data.orderDetailList.forEach((item) => {
                    list.push({
                        icon: item.productIcon,
                        name: item.productName,
                        price: item.productPrice,
                        count: item.productQuantity,
                    });
                });
                this.singleData = {
                    totalPrice: res.data.orderAmount,
                    total: res.data.orderDetailList.length,
                    list: list,
                };
                console.log(this.singleData);
            });
        } else {
            this.$router.push("/");
        }
    },
};
</script>

<style lang="less" scoped>
.container {
    .header {
        width: 100%;
        position: fixed;
        top: 0;
        background: #fff;
        z-index: 2;
    }
    .container-wapper {
        margin-top: 60px;
        height: calc(100vh - 60px);
        overflow: hidden;
        box-sizing: border-box;
        .container-content {
            .state {
                font-size: 24px;
                padding: 30px 20px;
                background: @bg-m;
                color: #000;
            }
            .order-info {
                background: #f6f6f6;
                .order-info-head {
                    background: @bg-m;
                    .table-container {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 20px;
                        border-radius: 10px 10px 0 0;
                        background: #fff;
                        p {
                            font-size: 16px;
                            color: #000;
                        }
                    }
                }
                .order-info-goods {
                    margin-top: 20px;
                    padding: 20px;
                    background: #fff;
                    .goods-remarks {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        p {
                            font-size: 16px;
                            flex: 1;
                            margin-right: 30px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .order-info-other {
                    margin-top: 20px;
                    background: #fff;
                    padding: 20px;
                    .order-info-other-title {
                        font-size: 20px;
                        color: #000;
                    }
                    .order-info-other-text {
                        display: flex;
                        align-items: center;
                        margin-top: 20px;
                        .order-info-other-text-l {
                            font-size: 16px;
                            color: rgb(106, 104, 104);
                            margin-right: 20px;
                        }
                        .order-info-other-text-r {
                            font-size: 16px;
                            color: #000;
                        }
                    }
                }
            }
        }
    }
}
</style>
